<template>
    <div v-loading="loading">
        <div class="usel white-block">
            <p><b>常用应用</b></p>
            <ul class="clearfix">
                <li v-for="(item,index) in list" :key="'use'+index" v-if="item.commonUse==1">
                    <i class="cut" @click="add(item, 0)"></i>
                    <div class="icon">
                        <el-image
                            class="img"
                            :src="item.iconInfo.path"
                            v-if="item.iconInfo"
                            fit="scale-down">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <p class="two-single-line">{{item.name}}</p>
                </li>
            </ul>
        </div>
        <div class="usel myself white-block">
            <p><b>我的应用</b></p>
            <ul class="clearfix">
                <li v-for="(item,index) in list" :key="'all'+index">
                    <i class="add iconfont icon-plus" @click="add(item, 1)" v-if="item.commonUse!=1"></i>
                    <div class="icon">
                        <el-image
                            class="img"
                            :src="item.iconInfo.path"
                            v-if="item.iconInfo"
                            fit="scale-down">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <p class="two-single-line">{{item.name}}</p>
                </li>
            </ul>

        </div>
        <div class="usel myself white-block">
            <p><b>平台其他应用</b></p>
            <ul class="ul clearfix">
                <li v-for="(item,index) in items" :key="'other'+index" class="li" @click="openApp(item)">
                    <div class="icon">
                        <el-image
                            class="img"
                            :src="item.iconInfo.path"
                            v-if="item.iconInfo"
                            fit="scale-down">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <p class="two-single-line">{{item.name}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    // import dialog from "../../components/dialog";

    export default {
        name: '',
        data() {
            return {
                items: [],
                list: [],
                loading: false
            }
        },
        mounted() {
            this.getData()
            this.getuselData()
        },
        methods: {
            add(item, type) {
                this.loading = true
                this.$http.post('/workbench/setCommonRes?type=' + type + '&resId=' + item.id).then(result => {
                    this.loading = false
                    if (result.success) {
                        item.commonUse = type
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            getData() {
                this.$http.get('/workbench/myRes').then(result => {
                    if (result.success) {
                        this.list = result.data
                        this.$method.updateView()
                    }
                    this.$method.updateView()
                })
            },
            getuselData() {
                this.$http.get('/workbench/otherRes').then(result => {
                    if (result.success) {
                        this.items = result.data
                        this.$method.updateView()
                    }
                    this.$method.updateView()
                })
            },
            openApp(item) {
                if (item && item.manufacturerUrl) window.open(item.manufacturerUrl)
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .usel {
        height: 100%;
        clear: both;

        p {
            font-size: .2rem;
        }

        ul {
            min-height: 2.14rem;

            li {
                float: left;
                margin-top: .3rem;
                margin-left: .47rem;
                margin-bottom: .3rem;
                width: 1.4rem;
                height: 1.54rem;
                background-color: #fff;
                position: relative;
                text-align: center;

                i {
                    width: 0.24rem;
                    height: 0.24rem;
                    display: block;
                    background-color: #E73323;
                    border-radius: 50%;
                    font-size: 0.2rem;
                    position: absolute;
                    right: -0.1rem;
                    top: -0.1rem;
                    display: none;
                    cursor: pointer;
                }

                i::before {
                    content: "";
                    width: 0.12rem;
                    height: 0.02rem;
                    position: absolute;
                    top: 0.1rem;
                    left: 0.06rem;
                    background-color: #fff;
                }

                .icon {
                    width: .7rem;
                    height: .7rem;
                    /*background-color: pink;*/
                    margin-top: .2rem;
                    margin-left: .35rem;

                    img {
                        width: .7rem;
                        height: .7rem;
                    }
                }

                p {
                    padding-top: .1rem;
                    font-size: .18rem;
                }
            }

            li:hover {
                background-color: #F4F8FB;

                i {
                    display: block;
                }
            }
        }

    }

    .myself {
        margin-top: 0.3rem;

        li {
            float: left;
            margin-top: 0.68rem;
            margin-left: 0.47rem;
            width: 1.4rem;
            /*height: 1.4rem;*/
            background-color: #F4F8FB;
            position: relative;
            cursor: pointer;

            i {
                width: 0.24rem;
                height: 0.24rem;
                display: block;
                background-color: #4995F4;
                border-radius: 50%;
                font-size: 0.2rem;
                position: absolute;
                right: -0.1rem;
                top: -0.1rem;
                display: none;

                &:before {

                }
            }

            i::after {
                content: "";
                width: 0.02rem;
                height: 0.12rem;
                position: absolute;
                top: 0.05rem;
                left: 0.11rem;
                background-color: #fff;
            }

            i::before {
                content: "";
                width: 0.12rem;
                height: 0.02rem;
                position: absolute;
                top: 0.1rem;
                left: 0.06rem;
                background-color: #fff;
            }

            &:hover {
                i {
                    display: block;
                    background-color: #4995F4;
                }

            }
        }

        .ul > .li {
            opacity: .5;

            &:hover {
                background-color: #fff;
            }
        }

    }
</style>
